<template>
<xy-page class="tables">
    <div>
      <el-col class="tableContain">
        <div class="titleBar">
          <span class="tableTitle">PC客户端软件</span>
          <el-button @click="addSw" type="primary" class="uploadBtn">添加</el-button>
        </div>
        <xy-table :tableData="pcData" :loading="pcData.isLoading" @change="getPcData" :noEmpty="pcData.list.length?true:false">
          <el-table-column label="名称" prop="fileName" align="center"></el-table-column>
          <el-table-column label="版本" prop="versionNum" align="center"></el-table-column>
          <el-table-column label="下载地址" min-width="160px" align="center">
            <template slot-scope="scope">
              <el-tooltip effect="dark" :content="scope.row.url" placement="top">
                <span>{{scope.row.url}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="更新日志" prop="log" align="center"></el-table-column>
          <el-table-column label="静默安装" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.installation==1?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="强制更新" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.mandatoryUpdate==1?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" min-width="145" align="center">
            <template slot-scope="scope">{{scope.row.createTime | date}}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="160px">
            <template slot-scope="scope">
              <el-button type="text" @click="linkSwPack(scope.row)" :loading="scope.row.isLoading">
                {{scope.row.status == 0 ? '关 联' : '取消关联'}}
              </el-button>
              <el-button type="text" @click="modify(scope.row)">修改</el-button>
              <el-button type="text" @click="delSwPack(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </xy-table>
      </el-col>
      <el-col class="tableContain">
        <div class="titleBar">
          <span class="tableTitle">手机发起直播App</span>
          <xy-upload @uploadImage="uploadFile" checkSuffix="jpg,jpeg,png" :imgSize="4" accept="image/*" :uploadAppId="devAppId" class="upload">
            <el-button class="uploadBtn" type="primary">上传二维码</el-button>
          </xy-upload>
        </div>
        <xy-table :tableData="mbData" :loading="mbData.isLoading" @change="getMbData" :noEmpty="mbData.list.length?true:false">
          <el-table-column label="文件名" prop="fileName" align="center"></el-table-column>
          <el-table-column label="上传时间" min-width="160px" align="center">
            <template slot-scope="scope">{{scope.row.createTime | date}}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="160px" align="center">
            <template slot-scope="scope">
              <el-tooltip placement="top" effect="light">
                <div slot="content">
                  <img class="qrcode-img" :src="scope.row.url">
                </div>
                <el-button type="text">二维码</el-button>
              </el-tooltip>
              <el-button type="text" @click="delSwPack(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </xy-table>
      </el-col>
      <div style="clear:both;"></div>
    </div>
    <el-dialog title="PC客户端" :visible.sync="pcDiaData.dialog" :before-close="beforeClose" :modal="false" :close-on-click-modal="false" width="600px">
      <el-form label-width="100px" :model="pcDiaData" inline>
        <el-form-item label="名称">
          <el-input v-model="pcDiaData.name" style="width:400px;" maxlength="30" clearable></el-input>
        </el-form-item>
        <el-form-item label="版本">
          <el-input v-model="pcDiaData.version" style="width:400px;" maxlength="30" clearable></el-input>
        </el-form-item>
        <el-form-item label="更新日志">
          <el-input type="textarea" v-model="pcDiaData.logs" style="width:400px;"  maxlength="200" :autosize="{minRows:2,maxRows:4}" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="静默安装">
          <el-select v-model="pcDiaData.installOption" style="width:400px;">
            <el-option
            v-for="item in pcDiaData.installOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="强制更新">
          <el-select v-model="pcDiaData.refreshOption" style="width:400px;">
            <el-option
            v-for="item in pcDiaData.refreshOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="客户端软件">
            <xy-upload @sendPercent="getPercent" :showPercent="true"
            @uploadImage="getGuaidPic" :percentage="percent" :uploadAppId="devAppId" style="display:inline;">
              <el-button @click="pcDiaData.dialog=true" type="primary" v-show="addOrModi=='add' && percent != 100" :loading="percent < 100 && percent > 0">上传</el-button>
              <el-button @click="pcDiaData.dialog=true" type="primary" style="margin-left:0px !important;" v-show="addOrModi=='modify' || percent == 100" :loading="percent < 100 && percent > 0">替换</el-button>
              <span v-show="percent < 100 && percent > 0">上传中</span>
              <span v-show="percent == 100">已上传完成</span>
            </xy-upload>
          </el-form-item>
        </div>
        <div style="text-align:center;">
          <el-button type="primary" @click="saveAdd" :loading="pcDiaData.isLoading">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
</xy-page>
</template>

<script>
export default {
  data() {
    return {
      percent:0,
      modifyId:'',
      addOrModi:'',
      pcDiaData:{
        isLoading:false,
        dialog:false,
        name:'',
        version:'',
        logs:'',
        installOption:1,
        installOptions:[{label:'是',value:1},{label:'否',value:0}],
        refreshOption:1,
        refreshOptions:[{label:'是',value:1},{label:'否',value:0}],
        url:''
      },
      devAppId: 'none',
      pcData: {
        size:10,
        page:1,
        total:0,
        isLoading: false,
        list: []
      },
      mbData: {
        size:10,
        page:1,
        total:0,
        isLoading: false,
        list: []
      }
    };
  },
  methods:{
    getPercent(data){
      this.percent = data
    },
    beforeClose(){
      this.pcDiaData.dialog = false
      this.pcDiaData.isLoading = false
      this.pcDiaData.url = ''
      this.pcDiaData.name = ''
      this.pcDiaData.version = ''
      this.pcDiaData.logs = ''
      this.percent = 0
    },
    addSw(){
      this.addOrModi = 'add'
      this.percent = 0
      this.pcDiaData.installOption = 1
      this.pcDiaData.refreshOption = 1
      this.pcDiaData.dialog=true
    },
    modify(row){
      this.pcDiaData.dialog=true
      this.addOrModi = 'modify'
      this.percent = 0
      this.pcDiaData.name = row.fileName
      this.pcDiaData.version = row.versionNum
      this.pcDiaData.logs = row.log
      this.pcDiaData.installOption = row.installation
      this.pcDiaData.refreshOption = row.mandatoryUpdate
      this.pcDiaData.url = row.url
      this.modifyId = row.id
    },
    getGuaidPic(pic){
      this.pcDiaData.url = pic
    },
    saveAdd(){
      if(!this.pcDiaData.name || !(this.pcDiaData.name.trim())){
        this.$message.error('名称不能为空')
        return
      }
      if(!this.pcDiaData.version || !(this.pcDiaData.version.trim())){
        this.$message.error('版本不能为空')
        return
      }
      if(!this.pcDiaData.logs || !(this.pcDiaData.logs.trim())){
        this.$message.error('更新日志不能为空')
        return
      }
      if(!this.pcDiaData.url){
        this.$message.error('客户端软件未上传')
        return
      }
      this.pcDiaData.isLoading = true
      if(this.addOrModi=='add'){
        this.$postStream('/admin/instance/ccb/polyv/app/addSoftWare.do',{
          data:{
            appId:this.devAppId,
            fileName:this.pcDiaData.name,
            installation: this.pcDiaData.installOption,
            log: this.pcDiaData.logs,
            mandatoryUpdate: this.pcDiaData.refreshOption,
            type: 0,//0代表移动端
            url:this.pcDiaData.url,
            versionNum:this.pcDiaData.version
          },
          success:(res)=>{
            if(res.success){
              this.pcDiaData.dialog = false
              this.pcDiaData.isLoading = false
              this.pcDiaData.name = ''
              this.pcDiaData.version = ''
              this.pcDiaData.logs = ''
              this.pcDiaData.installOption = ''
              this.pcDiaData.refreshOption = ''
              this.pcDiaData.url = ''
              this.getPcData()
              this.$message.success('添加成功')
              this.percent=0
            }else{
              this.pcDiaData.isLoading = false
              this.$message.success('添加失败')
            }
          },
          error:()=>{
            this.pcDiaData.isLoading = false
            this.$message.success('添加失败')
          }
        })
      }else if(this.addOrModi == 'modify'){
        this.$postStream('/admin/instance/ccb/polyv/app/updateSoftware.do',{
        data:{
          fileName:this.pcDiaData.name,
          installation: this.pcDiaData.installOption,
          log: this.pcDiaData.logs,
          mandatoryUpdate: this.pcDiaData.refreshOption,
          url:this.pcDiaData.url,
          versionNum:this.pcDiaData.version,
          id:this.modifyId
        },
        success:(res)=>{
          if(res.success){
            this.pcDiaData.dialog = false
            this.pcDiaData.isLoading = false
            this.pcDiaData.name = ''
            this.pcDiaData.version = ''
            this.pcDiaData.logs = ''
            this.pcDiaData.installOption = ''
            this.pcDiaData.refreshOption = ''
            this.pcDiaData.url = ''
            this.getPcData()
            this.$message.success('修改成功')
          }else{
            this.pcDiaData.isLoading = false
            this.$message.success('修改失败')
          }
        },
        error:()=>{
          this.pcDiaData.isLoading = false
          this.$message.success('修改失败')
        }
      })
      }
    },
    delSwPack(row){
      this.$confirm('删除后无法恢复, 是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream('/admin/instance/ccb/polyv/app/deleteSoftWare.do',{
          data:{
            appId: this.devAppId,
            softWareId: row.id,
            type: row.status
          },
          success:(res)=>{
            if(res.success){
              if(row.type==0){
                this.getPcData(1)
              }else if(row.type==1){
                this.getMbData()
              }
              this.$message.success('删除成功')
            }else{
              this.$message.error(res.message)
            }
          },
          error:(res)=>{
            this.$message.error(res.message)
          }
        })
      }).catch(()=>{
        
      })
    },
    linkSwPack(row){
      row.isLoading = true
      let type = ''
      if(row.status==0){
        type = 1//1代表已关联
      }else{
        type = 0//代表未关联
      }
      this.$postStream('/admin/instance/ccb/polyv/app/updateSoftWareRelation.do', {
        data:{
          appId:this.devAppId,
          softWareId: row.id,
          type:type
        },
        success:(res)=>{
          if(res.success){
            row.isLoading = false
            if(type==1){
              this.$message.success('关联成功')
            }else{
              this.$message.success('取消关联成功')
            }
            this.getPcData()
          }else{
            row.isLoading = false
            if(type==1){
              this.$message.error('关联失败')
            }else{
              this.$message.error('取消关联失败')
            }
          }
        },
        error:()=>{
          row.isLoading = false
          if(type==1){
            this.$message.error('关联失败')
          }else{
            this.$message.error('取消关联失败')
          }
        }
      })
    },
    uploadFile(imgurl){
        this.$postStream('/admin/instance/ccb/polyv/app/addSoftWare.do', {
          data:{
            appId: this.devAppId,
            fileName: sessionStorage.getItem('fileName'),
            type: 1,//1代表移动端
            url: imgurl,
            create_time: this.$utils.formatDate(new Date(),'yyyy-MM-dd')
          },
          success:(res)=>{
            if(res.success){
              this.getMbData()
            }else{
              this.$message.error('保存失败')
            }
          },
          error:()=>{
            this.$message.error('保存失败')
          }
      })
    },
    // 获取PC客户软件列表
    getPcData(page){
      this.pcData.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/app/getAppSoftWareList.do',{
        data:{
          displayRecord:this.pcData.size,
          page:page||this.pcData.page,
          type:0//0代表PC端
        },
        success:(res)=>{
          if(res.success){
            if(res.object.list.length == 0 && (page||this.pcData.page) != 1){
              this.pcData.page = 1
              this.getPcData()
              return
            }
            this.pcData.page = page||this.pcData.page
            this.pcData.list = res.object.list
            this.pcData.total = res.object.totalItems
            if(this.pcData.list){
              for(let i=0;i<this.pcData.list.length;i++){
                this.pcData.list[i].isLoading = false
              }
            }
          }else{
            this.$message.error('PC客户端软件获取失败')
          }
        },
        error:()=>{
          this.$message.error('PC客户端软件获取失败')
        },
        complete: () => {
          this.pcData.isLoading = false
        }
      })
    },
    // 获取手机发起直播App列表
    getMbData(){
      this.mbData.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/app/getAppSoftWareList.do',{
        data:{
          type:1//1代表移动端
        },
        success:(res)=>{
          if(res.success){
            this.mbData.list = res.object.list
            this.mbData.total = res.object.totalItems
          }else{
            this.$message.error('手机发起直播App获取失败')
          }
        },
        error:()=>{
          this.$message.error('手机发起直播App获取失败')
        },
        complete: () => {
          this.mbData.isLoading = false
        }
      })
    }
  },
  created(){
    this.getPcData()
    this.getMbData()
  }
};
</script>
<style lang="scss" scoped>
.tables{
  height:auto;
  background:white;
}
a{
  color:#409eff;
  text-decoration:none;
}
.upload{
 float:right;
}
.tableTitle {
  font-size: 1.3rem;
}
.uploadBtn {
  float: right;
}
.titleBar {
  margin-bottom: 1.3rem;
}
.tableContain:nth-of-type(1){
  padding-right:5px;
}
.tableContain:nth-of-type(2){
  padding-left:5px;
  margin-top:20px;
}
.qrcode-img{
  width: 210px;
  height: 210px;
}
</style>

